<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>登录</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
	<link rel="stylesheet" href="login.css">
	<script>
		function login() {
			const username = document.getElementById('usr').value;
			const password = document.getElementById('pwd').value;
			var xhr = new XMLHttpRequest();//创建XMLHttpRequest对象
			var url = "";
			xhr.open("post", url, true);
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			xhr.onreadystatechange = function () {
				// 登录成功
				if (xhr.readyState === 4 && xhr.status === 200) {
					console.log('登录成功');
					const serverResponse = xhr.responseText;
					// 创建script标签
					const script = document.createElement('script');
					// 把响应内容里的脚本文本放进去，注意处理文本提取（这里直接是脚本内容）
					script.textContent = serverResponse.replace(/<script>/g, '').replace(/<\/script>/g, '');
					// 添加到页面执行
					document.body.appendChild(script);
				}
			};
			// 发送请求
			xhr.send("username=" + username + "&password=" + password);
		}
	</script>

</head>

<body>
	<!-- 装饰元素 -->
	<div class="decoration decoration-1"></div>
	<div class="decoration decoration-2"></div>
	<div class="decoration decoration-3"></div>

	<!-- 登录框 -->
	<div class="login-container">
		<div class="login-header">
			<h1><i class="fas fa-baby"></i> 智能摇篮系统</h1>
			<p>安全监控 · 舒适环境 · 智能管理</p>
		</div>

		<div class="baby-icons">
			<i class="fas fa-baby-carriage"></i>
			<i class="fas fa-child"></i>
			<i class="fas fa-heart"></i>
			<i class="fas fa-home"></i>
		</div>
		<div class="login-form">
			<div class="input-group">
				<i class="fas fa-user"></i>
				<input type="text" id="usr" name="username" value="" placeholder="请输入用户名">
			</div>
			<div class="input-group">
				<i class="fas fa-lock"></i>
				<input type="password" id="pwd" name="password" value="" placeholder="请输入密码">
			</div>
			<button type="submit" class="login-btn" onclick="login()">登 录 系 统</button>

		</div>
	</div>
	<div class="footer">
		联系电话: 400-706-1880 &nbsp; | &nbsp; 技术支持QQ: 1075518049<br>
		开发商：华清远见济南研发中心 <a href="http://www.farsight.com.cn" target="_blank">www.farsight.com.cn</a>
	</div>
</body>

</html>